<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Tab Bar - Custom</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
    <link rel="stylesheet" href="../../../../../scripts/testing/styles.css" />
  </head>

  <body>
    <ion-app>
      <ion-content>
        <!-- Default -->
        <ion-tab-bar selected-tab="1">
          <ion-tab-button tab="1" disabled>
            <ion-icon name="book"></ion-icon>
            <ion-label>Recents</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="1">
            <ion-icon name="book"></ion-icon>
            <ion-label>Recents</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="2">
            <ion-icon name="star"></ion-icon>
            <ion-label>Favorites</ion-label>
            <ion-badge>6</ion-badge>
          </ion-tab-button>

          <ion-tab-button tab="3">
            <ion-icon name="cog"></ion-icon>
            <ion-label>Settings</ion-label>
          </ion-tab-button>
        </ion-tab-bar>

        <!-- Custom Class -->
        <ion-tab-bar selected-tab="11" class="custom-tab-bar-color">
          <ion-tab-button tab="11">
            <ion-icon name="book"></ion-icon>
            <ion-label>Recents</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="22">
            <ion-icon name="star"></ion-icon>
            <ion-label>Favorites</ion-label>
            <ion-badge>6</ion-badge>
          </ion-tab-button>

          <ion-tab-button tab="33">
            <ion-icon name="cog"></ion-icon>
            <ion-label>Settings</ion-label>
          </ion-tab-button>
        </ion-tab-bar>

        <!-- Color & Custom Class -->
        <ion-tab-bar selected-tab="111" color="danger" class="custom-tab-bar-color">
          <ion-tab-button tab="111">
            <ion-icon name="book"></ion-icon>
            <ion-label>Recents</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="222">
            <ion-icon name="star"></ion-icon>
            <ion-label>Favorites</ion-label>
            <ion-badge>6</ion-badge>
          </ion-tab-button>

          <ion-tab-button tab="333">
            <ion-icon name="cog"></ion-icon>
            <ion-label>Settings</ion-label>
          </ion-tab-button>
        </ion-tab-bar>

        <!-- Custom Background Buttons -->
        <ion-tab-bar selected-tab="1111" class="custom-tab-button-bar">
          <ion-tab-button tab="1111" class="custom-tab-button-background-red">
            <ion-icon name="book"></ion-icon>
            <ion-label>Recents</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="2222" class="custom-tab-button-background-yellow">
            <ion-icon name="star"></ion-icon>
            <ion-label>Favorites</ion-label>
            <ion-badge>6</ion-badge>
          </ion-tab-button>

          <ion-tab-button tab="3333" class="custom-tab-button-background-green">
            <ion-icon name="cog"></ion-icon>
            <ion-label>Settings</ion-label>
          </ion-tab-button>
        </ion-tab-bar>

        <!-- Custom Color Buttons -->
        <ion-tab-bar selected-tab="1111">
          <ion-tab-button tab="1111" class="custom-tab-button-color-red">
            <ion-icon name="book"></ion-icon>
            <ion-label>Recents</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="2222" class="custom-tab-button-color-yellow">
            <ion-icon name="star"></ion-icon>
            <ion-label>Favorites</ion-label>
            <ion-badge>6</ion-badge>
          </ion-tab-button>

          <ion-tab-button tab="3333" class="custom-tab-button-color-green">
            <ion-icon name="cog"></ion-icon>
            <ion-label>Settings</ion-label>
          </ion-tab-button>
        </ion-tab-bar>

        <!-- Custom All -->
        <ion-tab-bar selected-tab="11111" class="custom-all">
          <ion-tab-button tab="11111">
            <ion-icon name="book"></ion-icon>
            <ion-label>Recents</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="22222">
            <ion-icon name="star" class="custom-icon"></ion-icon>
          </ion-tab-button>

          <ion-tab-button tab="33333">
            <ion-icon name="cog"></ion-icon>
            <ion-label>Settings</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-content>
    </ion-app>

    <style>
      .custom-tab-bar-color {
        --background: #7044ff;
        --color: rgb(255, 0, 234, 0.6);
        --color-selected: #ff00ea;
      }

      .custom-tab-bar-color ion-badge {
        background: rgba(255, 255, 255, 0.8);
        color: rgba(0, 0, 0, 0.5);
      }

      .custom-tab-button-bar {
        --background: #178fb8;
        --color: rgba(255, 255, 255, 0.6);
        --color-selected: #ffffff;
      }

      .custom-tab-button-background-red {
        --background: #a32b2b;
      }

      .custom-tab-button-background-yellow {
        --background: #b7b915;
      }

      .custom-tab-button-background-green {
        --background: #5a9b2e;
      }

      .custom-tab-button-color-red {
        --color: rgba(163, 43, 43, 0.6);
        --color-selected: #a32b2b;
      }

      .custom-tab-button-color-yellow {
        --color: rgba(183, 185, 21, 0.6);
        --color-selected: #b7b915;
      }

      .custom-tab-button-color-green {
        --color: rgb(90, 155, 46, 0.6);
        --color-selected: #5a9b2e;
      }

      .custom-all {
        margin-top: 30px;
        margin-bottom: 30px;
        contain: none;

        --background: #f6f6f6;
        --color-selected: #1b8472;

        --border: none;
      }

      .custom-all ion-tab-button:nth-child(2) {
        --background: #1b8472;
        --color: rgba(255, 255, 255, 0.6);
        --color-selected: #ffffff;

        border-radius: 50%;
        max-width: 80px;
        height: 80px;
      }

      .custom-icon {
        font-size: 50px;
      }
    </style>
  </body>
</html>
